<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>Demo - ToggleButton</title>
<link href="../../../css/assets/dpl/base.css" rel="stylesheet"/>
<link href="../assets/custombutton.css" rel="stylesheet"/>
<style>
    h1 {
        font-size: 2em;
        margin: 10px;
        text-align: center;
    }

    h2 {
        font-size: 1.5em;
        margin: 10px;
        text-align: center;
    }

    #wrap {
        width: 90%;
        margin: 0 auto;
    }
</style>
</head>
<body>
<div id="wrap">
    <h1 id="describe">toggle button demo</h1>

    <div id="button_container">

    </div>
    <label>禁用：<input type="checkbox" id='dis'/></label>
</div>
<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use("node,button", function (S, Node, Button) {
        // view
        // render to container : button_container
        // control
        // view as a parameter
        var b = new Button({
            content:"测试",
            checkable:true,
            describedby:"describe",
            render:"#button_container"
        });

        b.render();

        b.on("click", function () {
            S.log("click : ");
            S.log(b.get("checked"));
        });

        var dis = Node.one("#dis");

        dis.on("click", function () {
            if (dis[0].checked) {
                b.set('disabled', true);
            } else {
                b.set('disabled', false);
            }
        });

        if (dis[0].checked) {
            b.set('disabled', true);
        } else {
            b.set('disabled', false);
        }
    });
</script>
</body>
</html>